@import '../../../common';

.question-list-container {
  box-sizing: border-box;
  padding: 24rpx;

  .list {
    border-radius: 24rpx;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 24rpx;

    .item {
      display: flex;
      padding: 0 0 12rpx 0;

      &:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
      }
    }

    .left {
      position: relative;
      height: 34rpx;
      width: 44rpx;
      @include flex;
      padding-top: 28rpx;

      text {
        display: block;
        background-color: var(--color-theme);
        width: 100%;
        height: 36rpx;
        @include fontStyle(16, 20, #FFFFFF, 400);
        @include flex-center;
        border-radius: 6rpx;

        &.triangle {
          width: 0;
          height: 0;
          background-color: transparent;
          display: block;
          position: absolute;
          bottom: -8rpx;
          left: 0;
          border-bottom: 16rpx solid transparent;
          border-left: 16rpx solid var(--color-theme);
          border-right: 16rpx solid transparent;
        }
      }
    }

    .right {
      width: calc(100% - 44rpx);
      box-sizing: border-box;
      padding-left: 16rpx;

      .title {
        height: calc(28rpx + 36rpx + 24rpx);
        @include fontStyle(28, 36, #000000, 400);
        @include flex-space-between;

        text {
          width: calc(100% - 24rpx - 16rpx);
        }

        image {
          @include size(24, 24);
          transform: rotate(90deg);

          &.active {
            transform: rotate(-90deg);
          }
        }
      }

      .content {
        @include fontStyle(28, 42, #666666, 400);
        padding-bottom: 14rpx;
      }
    }
  }
}